<template>
    <div class="content w100 flex1">
        <div class="slogan flex-center">
            <img src="../../assets/img/big-logo.png" alt="">
            <ul class="ml15">
                <li style="font-size: 24px;margin-bottom: 15px;">星录，你的海外营销 AI 助手</li>
                <li>依托庞大智能库，开启未来新视界。</li>
            </ul>
        </div>
        <div class="flex-center flex-row-reverse" style="margin-top: 25px;">
            <img src="../../assets/img/reload.png" alt="">
            <span class="red pr5">换一换</span>
        </div>
        <div class="mt15 flex_top" style="height: 314px;">
            <div class="white-bg m8 br10 h100 box-shadow p8 flex_1" >
                <div class="pt8 pl8">最近热搜</div>
                <div class="grey fz12 pt8 pl8" style="padding-bottom: 5px;">深度搜索你关心的问题</div>
                <div class="grey-bg pl8 pt14 pb14 br4 mt8">如何寻找免佣商品交换类红人？</div>
                <div class="grey-bg pl8 pt14 pb14 br4 mt8">A玩具在北美地区的销售情況？</div>
                <div class="grey-bg pl8 pt14 pb14 br4 mt8">MrBeast网红视频表现怎么样？</div>
                <div class="grey-bg pl8 pt14 pb14 br4 mt8">东南亚出海还有机会吗？</div>
                <div class="grey-bg pl8 pt14 pb14 br4 mt8">如何入驻Tiktok小店？</div>
            </div>
            <div class="white-bg m8 br10 h100 box-shadow p8 flex_1">
                <div class="pt8 pl8">达人解读</div>
                <div class="grey fz12 pt8 pl8" style="padding-bottom: 5px;">深度解答热门合作红人</div>
                <div class="start-card m10 flex-center">
                    <div class="img position-relative" style="width: 108px;height: 108px;">
                        <img src="../../assets/img/user.png" class="w100 h100" alt="">
                        <div class="red-bg fz12 white" style="position: absolute;top: 8px;left: 8px;border-radius: 8px;padding: 3px 8px;">服饰</div>
                    </div>
                    <div class="flex1 p12 grey-bg info">
                        <div class="title">Camilla Araujo</div>
                        <div class="item flex_between">
                            <span class="fz12">240万</span>
                            <span class="grey fz12">粉丝量</span>
                        </div>
                        <div class="item flex_between">
                            <span class="fz12">16.23%</span>
                            <span class="grey fz12">平均互动率</span>
                        </div>
                    </div>
                </div>
                <div class="start-card m10 flex-center">
                    <div class="img position-relative" style="width: 108px;height: 108px;">
                        <img src="../../assets/img/user.png" class="w100 h100" alt="">
                        <div class="red-bg fz12 white" style="position: absolute;top: 8px;left: 8px;border-radius: 8px;padding: 3px 8px;">服饰</div>
                    </div>
                    <div class="flex1 p12 grey-bg info">
                        <div class="title">Camilla Araujo</div>
                        <div class="item flex_between">
                            <span class="fz12">240万</span>
                            <span class="grey fz12">粉丝量</span>
                        </div>
                        <div class="item flex_between">
                            <span class="fz12">16.23%</span>
                            <span class="grey fz12">平均互动率</span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:256px;">
                <div class="white-bg br10 h100 box-shadow m8 p8">
                    <div class="pt8 pl8">效率工具</div>
                    <div class="grey fz12 pt8 pl8" style="padding-bottom: 5px;">热门降本增效出海工具</div>
                    <div class="flex_between_top p8">
                        <div class="picCol">
                            <img src="../../assets/img/pic_ai.png" style="width:100px;">
                            <div class="pic_info">Al生成建联邮件</div>
                        </div>
                        <div class="picCol">
                            <img src="../../assets/img/pic_email.png" style="width:100px;">
                            <div class="pic_info">Al分析爆单视频</div>
                        </div>
                    </div>
                </div>
                <div class="miniBox">
                    <!-- <div class="miniTit">小程序</div> -->
                    <div class="miniInfo flex_start">
                        <img src="../../assets/img/pic_qr.png" class="flex_shrink pic_qr" style="width:60px;">
                        <div>
                            <div class="pt8 pl8">尝鲜星录小程序</div>
                            <div class="grey fz12 pt8 pl8" style="padding-bottom: 5px;">新一代红人搜索引擎</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sendBox">
            <input type="text" placeholder="输入你想了解的内容，如商品、红人">
            <i class="icon_send"></i>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.content {
    overflow: auto;
    background: url(@/assets/img/bg.png) no-repeat center center;
    padding: 0 144px;
}
.slogan {
    margin-top: 32px;
}

/**flex 布局**/
.flex_column_top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.flex_column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex: 1;
}

.flex_column_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.flex_column_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex_column_between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex_top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.flex_center_end {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.flex_start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.flex_end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}
.flex_start_end{
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;		
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.flex_around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex_between_end{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-content: flex-end;		
}
.flex_between_top {
  display: flex;
  justify-content: space-between;
}
.flex_1{
  flex:1;
}
.flex_shrink{
  flex-shrink:0;
}
.flex_wrap {
  flex-wrap: wrap;
}
.info .title{font-size:14px;color:#1D2129;margin-bottom:16px;}
.info .item{padding:4px 0;}
.picCol{background: #F7F8FA;border-radius: 15px;padding-bottom: 10px;}
.pic_info{font-size:12px;color:#1D2129;margin-top:8px;text-align: center;}
.miniBox{background: url(@/assets/img/miniBg.png) no-repeat center center;background-size: 100% 100%;}
.miniInfo{height: 126px;padding: 10px 25px 16px 25px;}
.pic_qr{border-radius: 8px;}
.sendBox{
  width:98%;
  border:1px solid #E5E6EB;
  border-radius: 12px;
  position: relative;
  height:56px;
  background: #fff;
  margin:90px 8px 0 8px;
}
.sendBox input{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: rgba(255,255,255,0);
  border:none;
  outline:none;
  padding:0 52px 0 16px;
  box-sizing: border-box;
  z-index:1;
}
.sendBox input::placeholder{color:#818999;}
.icon_send{
  position: absolute;
  z-index:2;
  top:50%;
  margin-top:-16px;
  right:16px;
  display: block;
  width:32px;
  height:32px;
  background: url(@/assets/img/send.png) no-repeat center center;background-size: 100% 100%;
}
</style>